<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-edit"></i>供应商申请</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="供应商名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="供应商性质" prop="type">
                <el-checkbox-group v-model="ruleForm.type">
                    <el-checkbox label="饮料" name="type" value="2"></el-checkbox>
                    <el-checkbox label="零食" name="type" value="3"></el-checkbox>
                    <el-checkbox label="酒类" name="type" value="4"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="供应商电话" prop="desc">
                <el-input type="text" v-model="ruleForm.desc"></el-input>
            </el-form-item>
           <el-form-item label="所在地区" prop="city">
            <div class="city" @click="toAddress">
                <el-input v-model="ruleForm.city" clearable placeholder="请点击输入框选择"></el-input>
            </div>
            <i class="arrow-r"> </i>
            <v-distpicker type="mobile" @selected='selected' v-show="addInp">
            </v-distpicker>
            <div class="mask" v-show="mask"></div>
            </el-form-item>
            <el-form-item label="供应商地址" prop="dz">
                <el-input type="text" v-model="ruleForm.dz"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即申请</el-button>
                <el-button @click="resetForm('ruleForm')">页面重置</el-button>
            </el-form-item>
        </el-form>
    </div>

</template>

<script>
    import VDistpicker from 'v-distpicker'
    export default {
        components: {VDistpicker},
        data() {
            return {
                ruleForm: {
                    name: '',
                    type: [],
                    desc: '',
                    dz: '',
                    city: ''
                },
                rules: {
                    name: [
                        { required: true, message: '请输入供应商名', trigger: 'blur' },
                    ],
                    type: [
                        { type: 'array', required: true, message: '请至少选择一个供应商性质', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: '请填写供应商电话', trigger: 'blur' }
                    ],
                    dz: [
                        { required: true, message: '请填写供应商地址', trigger: 'blur' }
                    ],
                    city: [
                        { required: true, message: '所在区域必须选择', trigger: 'change'}
                    ],
                },
                addInp: false,
                mask: false,
            };
        },
        methods: {
            // 点击弹出三级联动
            toAddress () {
                this.mask = true
                this.addInp = true
            },
            // 省市区三级联动
            selected (data) {
                this.mask = false
                this.addInp = false
                this.ruleForm.city = data.province.value + ' ' + data.city.value + ' ' + data.area.value
            },
            submitForm:function (){
                this.$axios.post("gyssq",{
                    supplierName:this.ruleForm.name,
                    supplierPhone:this.ruleForm.desc,
                    supplierSite:this.ruleForm.city+" "+this.ruleForm.dz,
                    goodsType:this.ruleForm.type,
                    supplierAf:localStorage.getItem('ms_username')
                }).then(resp => {
                    if (resp) {
                        this.$message.success('申请成功');
                    }
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

        }
    }
</script>

